import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import CaseStore from '../../stores/CaseStore';
import { Case } from '../../entity/CaseEntiy';
import { RouterStore } from 'mobx-react-router';
import { NavBar, Icon } from 'antd-mobile';

import './CaseList.scss';

export interface CaseListProps {
    caseStore: CaseStore;
    
    routingStore: RouterStore;
}
@inject('caseStore', 'routingStore')
@observer
export default class CaseList extends Component<CaseListProps> {
    componentWillMount() {
        this.props.caseStore.getCompletedCaseList();
    }
    render(): JSX.Element {
        const { caseStore, routingStore } = this.props;
        return (
            <div className="list-container">
                <NavBar
                    mode="light"
                    icon={<Icon type="left" />}
                    leftContent={<span style={{ fontFamily: 'Arial, Helvetica, sans-serif' }}>返回</span>}
                    onLeftClick={() => { routingStore.goBack(); }}
                    className="list-nav"
                >
                    <span className="list-title"> {caseStore.CaseListCategory} </span>
                </NavBar>

                <div className="case-container">
                    {
                        caseStore.caseList.map((v: Case, i: number): JSX.Element => (
                            <div
                                className="case-item"
                                key={i}
                                onClick={
                                    () => {
                                        routingStore.push('/undone');
                                    }
                                }
                            >
                                <p> {i + 1 + '、' + v.content}</p>
                                <div>
                                    <span>{v.uuid}</span>
                                    <span>{v.date}</span>
                                </div>

                            </div>
                        ))
                    }
                </div>
            </div>
        );
    }
}